<template>
    <div class="main-column">
        
        <div class="column-content">
            <h1 class="column-h1">
                <span>Laravel 项目深度优化过程</span>
            </h1>
            <div class="column-absolute">
                <div class="column-fixed">
                    <div class="column-menu-list">
                        <a href="" class="menu-item">
                            <el-tooltip content="点赞" placement="left" effect="light" class="item-tip">
                                <i class="fa fa-thumbs-up" aria-hidden="true"></i>
                            </el-tooltip>
                            <span class="menu-item-sp">1</span>
                        </a>

                        <a href="" class="menu-item">
                            <el-tooltip content="收藏" placement="left" effect="light" class="item-tip">
                                <i class="fa fa-heart" aria-hidden="true"></i>
                            </el-tooltip>
                            <span class="menu-item-sp">2</span>
                        </a>

                        <a href="" class="menu-item">
                            <el-tooltip content="评论" placement="left" effect="light" class="item-tip">
                                <i class="fa fa-comments" aria-hidden="true"></i>
                            </el-tooltip>
                            <span class="menu-item-sp">3</span>
                        </a>

                        <a href="" class="menu-item last">
                            <el-tooltip content="关注最新动态" placement="left" effect="light" class="item-tip">
                                <i class="fa fa-eye" aria-hidden="true"></i>
                            </el-tooltip>
                            <span class="menu-item-sp">4</span>
                        </a>
                    </div>
                </div>  
            </div>
            <p class="column-p">
                <a href="" class="column-p-a">                  
                    <img src="\images\icon\laravel.png" alt="" class="column-p-img">
                    <span class="sp">laravel</span>              
                </a>
                <span class="divider">/</span>
                <span>
                    <i class="fa fa-eye" aria-hidden="true"></i>
                    <span>5555</span>
                </span>
                <span class="divider">/</span>

                <span>
                    <i class="fa fa-comments" aria-hidden="true"></i>
                    <span>10w+</span>
                </span>

                <span class="divider">/</span>
              
                <span>创建于17天前</span>

                <span class="divider">/</span>
                <span>修改于2天前</span>

            </p>
            <div class="divider-hr"></div>
            <div class="column-body">
                公司的系统是面向商户营销的 CRM 系统，采用的是 saas 模式而非独立部署，
                用户表 200W, 日活 3W，日增长 5000+，每天的请求量总量目前是 200 多 W 次，
                其中服务端的请求量主要来自前端 API 请求 + 商户 ERP 数据同歩 + 微信事件回调。
                以下均在抛去系统设计的问题不讨论，小公司的产品活下去才是第一要素，只能现有的情况下尽量优化，
                一步步摸着石头过河。
            </div>

        </div>


        <div class="column-discuss">
            <div class="discuss-divider">
                <i class="fa fa-comments" aria-hidden="true"></i>
                <span class="dvider-sp">讨论数量：9999+</span>
            </div>


            <div class="discuss-feed">
                <div class="feed-avatar">
                    <a href="">
                        <img src="/images/user/dargen.png" alt="">
                    </a>
                </div>
                
                <div class="feed-item">
                    <div class="feed-item-header">
                        <div class="item-header-meta">
                            <a href="">评论路人甲</a>
                            <div class="metadata">
                                <a href="">
                                    <i class="fa fa-trophy" aria-hidden="true"></i>
                                    <span class="metadata-sp">128</span>
                                    <span class="metadata-sp">声望</span>
                                </a>
                                <div class="metadata-desc">
                                    <span class="divider">/</span>
                                    <span style="font-size:12px"> 个人简介</span>
                                </div>
                            </div>

                        </div>
                        <div class="item-header-reaction">
                            <a href="">
                                <i class="fa fa-reply" aria-hidden="true"></i>
                            </a>
                        </div>
                    </div>
                    <div class="feed-item-body">
                        <div class="item-body-text">
                            <p>远山青黛绿如油</p>
                            <p>禁在樊笼奔波愁</p>
                        </div>
                    </div>
                    <div class="feed-item-mute">
                        <i class="fa fa-clock-o" aria-hidden="true"></i>
                        <span>1天前</span>
                        <a href="" class="feed-item-mute-a">
                            <i class="fa fa-commenting-o" aria-hidden="true"></i>
                            <span>评论</span>
                        </a>
                    </div>

                    <div class="feed-item-comment">
                        <div style="margin-top: 15px;">
                            <el-input placeholder="请输入内容">                        
                                <el-button slot="append">评论</el-button>
                            </el-input>
                        </div>

                        <!--加载评论下的回复内容-->
                        <div class="discuss-replay">
                            <div class="discuss-replay-divider"></div>
                            <a href="">
                                <img src="/images/user/dog.png" alt="" class="discuss-replay-img">
                            </a>
                            <a href="" style="color:#403f3f;margin-left:3px">abc</a>
                            <span style="color:#a5a5a5;font-size:13px;padding-left:10px;">(楼主)</span>
                            <span style="color:#a5a5a5;font-size:13px;padding-left:10px;">3周前</span>
                            <div class="discuss-replay-content">承让承让</div>
                            <div class="discuss-replay-icon">
                                <a href="">
                                    <el-tooltip content="点赞" placement="top" effect="light" class="dis-tip">
                                        <i class="fa fa-thumbs-o-up" aria-hidden="true"></i>
                                    </el-tooltip>
                                </a>

                                <a href="">
                                    <el-tooltip content="举报" placement="top" effect="light" class="dis-tip">
                                        <i class="fa fa-flag-o" aria-hidden="true"></i> 
                                    </el-tooltip>
                                </a>

                                <a href="">
                                    <el-tooltip content="回复" placement="top" effect="light" class="dis-tip">
                                        <i class="fa fa-reply" aria-hidden="true"></i>
                                    </el-tooltip>
                                </a>

                            </div>

                        </div>


                        <!--评论下的回复内容结束-->

                    </div>

                    <div class="feed-item-footer">
                        <div class="item-footer-col">
                            <a href="" class="col-item">
                                <el-tooltip content="点赞" placement="top" effect="light" class="col-tip">
                                    <i class="fa fa-thumbs-up" aria-hidden="true"></i>
                                </el-tooltip>
                            </a>

                            <a href="" class="col-item">
                                <el-tooltip content="举报" placement="top" effect="light" class="col-tip">
                                    <i class="fa fa-flag-o" aria-hidden="true"></i> 
                                </el-tooltip>
                            </a>

                            <a href="" class="col-item">
                                <el-tooltip content="评论链接" placement="top" effect="light" class="col-tip">
                                    <i class="fa fa-hashtag" aria-hidden="true"></i>
                                </el-tooltip>
                            </a>
                        </div>
                    </div>

                </div>

            </div>

            <div class="discuss-feed">
                <div class="feed-avatar">
                    <a href="">
                        <img src="/images/user/dargen.png" alt="">
                    </a>
                </div>
                
                <div class="feed-item">
                    <div class="feed-item-header">
                        <div class="item-header-meta">
                            <a href="">评论路人甲</a>
                            <div class="metadata">
                                <a href="">
                                    <i class="fa fa-trophy" aria-hidden="true"></i>
                                    <span class="metadata-sp">128</span>
                                    <span class="metadata-sp">声望</span>
                                </a>
                                <div class="metadata-desc">
                                    <span class="divider">/</span>
                                    <span style="font-size:12px"> 个人简介</span>
                                </div>
                            </div>

                        </div>
                        <div class="item-header-reaction">
                            <a href="">
                                <i class="fa fa-reply" aria-hidden="true"></i>
                            </a>
                        </div>
                    </div>
                    <div class="feed-item-body">
                        <div class="item-body-text">
                            <p>远山青黛绿如油</p>
                            <p>禁在樊笼奔波愁</p>
                        </div>
                    </div>
                    <div class="feed-item-mute">
                        <i class="fa fa-clock-o" aria-hidden="true"></i>
                        <span>1天前</span>
                        <a href="" class="feed-item-mute-a">
                            <i class="fa fa-commenting-o" aria-hidden="true"></i>
                            <span>评论</span>
                        </a>
                    </div>

                    <div class="feed-item-comment">
                        <div style="margin-top: 15px;">
                            <el-input placeholder="请输入内容">                        
                                <el-button slot="append">评论</el-button>
                            </el-input>
                        </div>

                        <!--加载评论下的回复内容-->
                        <div class="discuss-replay">
                            <div class="discuss-replay-divider"></div>
                            <a href="">
                                <img src="/images/user/dog.png" alt="" class="discuss-replay-img">
                            </a>
                            <a href="" style="color:#403f3f;margin-left:3px">abc</a>
                            <span style="color:#a5a5a5;font-size:13px;padding-left:10px;">(楼主)</span>
                            <span style="color:#a5a5a5;font-size:13px;padding-left:10px;">3周前</span>
                            <div class="discuss-replay-content">承让承让</div>
                            <div class="discuss-replay-icon">
                                <a href="">
                                    <el-tooltip content="点赞" placement="top" effect="light" class="dis-tip">
                                        <i class="fa fa-thumbs-o-up" aria-hidden="true"></i>
                                    </el-tooltip>
                                </a>

                                <a href="">
                                    <el-tooltip content="举报" placement="top" effect="light" class="dis-tip">
                                        <i class="fa fa-flag-o" aria-hidden="true"></i> 
                                    </el-tooltip>
                                </a>

                                <a href="">
                                    <el-tooltip content="回复" placement="top" effect="light" class="dis-tip">
                                        <i class="fa fa-reply" aria-hidden="true"></i>
                                    </el-tooltip>
                                </a>

                            </div>

                        </div>
                        <!--评论下的回复内容结束-->

                        <!--加载评论下的回复内容-->
                        <div class="discuss-replay">
                            <div class="discuss-replay-divider"></div>
                            <a href="">
                                <img src="/images/user/dog.png" alt="" class="discuss-replay-img">
                            </a>
                            <a href="" style="color:#403f3f;margin-left:3px">abc</a>
                            <span style="color:#a5a5a5;font-size:13px;padding-left:10px;">(楼主)</span>
                            <span style="color:#a5a5a5;font-size:13px;padding-left:10px;">3周前</span>
                            <div class="discuss-replay-content">承让承让</div>
                            <div class="discuss-replay-icon">
                                <a href="">
                                    <el-tooltip content="点赞" placement="top" effect="light" class="dis-tip">
                                        <i class="fa fa-thumbs-o-up" aria-hidden="true"></i>
                                    </el-tooltip>
                                </a>

                                <a href="">
                                    <el-tooltip content="举报" placement="top" effect="light" class="dis-tip">
                                        <i class="fa fa-flag-o" aria-hidden="true"></i> 
                                    </el-tooltip>
                                </a>

                                <a href="">
                                    <el-tooltip content="回复" placement="top" effect="light" class="dis-tip">
                                        <i class="fa fa-reply" aria-hidden="true"></i>
                                    </el-tooltip>
                                </a>

                            </div>

                        </div>
                        <!--评论下的回复内容结束-->

                    </div>

                    <div class="feed-item-footer">
                        <div class="item-footer-col">
                            <a href="" class="col-item">
                                <el-tooltip content="点赞" placement="top" effect="light" class="col-tip">
                                    <i class="fa fa-thumbs-up" aria-hidden="true"></i>
                                </el-tooltip>
                                <span style="padding-left:3px;font-size:13px;">99+</span>
                            </a>

                            <a href="" class="col-item">
                                <el-tooltip content="举报" placement="top" effect="light" class="col-tip">
                                    <i class="fa fa-flag-o" aria-hidden="true"></i> 
                                </el-tooltip>
                            </a>

                            <a href="" class="col-item">
                                <el-tooltip content="评论链接" placement="top" effect="light" class="col-tip">
                                    <i class="fa fa-hashtag" aria-hidden="true"></i>
                                </el-tooltip>
                            </a>
                        </div>
                    </div>

                </div>

            </div>


        </div>

        <div class="column-replay">
            <div class="reply-editor">
                <weditor></weditor>

                <div class="replay-button">
                    <div class="replay-button-but">
                        <el-button type="primary" class="el-icon-chat-round">评论</el-button>
                    </div>           
                </div>
            </div>        
        </div>
        
    </div>
</template>
<script>
import Weditor from '../../components/WangeditorComponent.vue';

export default {
    data(){
        return{

        }
    },
    methods:{
        

       
      
    },
    created(){      
       // 
    },
    mounted(){
        
    },
    components:{
        Weditor
    },
    
}
</script>


<style>

/************ column-content start******************************/

    .column-content{
        padding: 20px;
        color:#636b6f;
        background-color: #fff;
        border-radius: .28571429rem;

    }
    .column-absolute{
        left: 86%;
        top: 0px;
        width: 10px;
        min-height: 314px;
      /*  height: 14682px; */
        right: auto;
        padding: 0 0 0 2rem;
        position: absolute;
    }
    .column-fixed{
       position: fixed;
    }
    .column-menu-list{
        width:55px;
        border-radius: .28571429rem;
        background:#fff;
        display: inline-block;
    }
    .menu-item{
        display: block;
        padding:10px 4px;
        text-align: center;
        border-bottom: 1px solid #EBEEF5;
    }
    .fa{
        color: #888c8e;
    }
    .menu-item:hover .fa{
        color: red;
    }
    .item-tip{
        display: block;
      
    }
    .menu-item .last{
       border-bottom:none; 
    }
    .menu-item-sp{
        display: block;
    }

    .column-p{
        font-size:13px;
        font-weight: 400;
        color:#888c8e;
    }
    .column-p-a{
        color:#888c8e;
    }
    .column-p-a:hover .sp{
        color:#4183c4;
        text-decoration:underline;
    }
    .divider{
        margin:0 4px;
    }
    .column-p-img{
        width:18px;
        height:18px;
    }
    .divider-hr{
        color: #777;
        font-weight: 400;
        font-size: 1rem;
        border-top: 1px solid #d3e0e9;
        border-bottom: 1px solid rgba(211,224,233,.15);
        margin: 1rem 0;
        line-height: 1;
        height: 0;
    }

/************ column-content end******************************/

/************ column-discuss start******************************/
    .column-discuss{
        margin-top:10px;
        /*
        padding: 20px;
        color:#636b6f;
        background-color: #fff;
        border-radius: .28571429rem;
        */
    }
    .discuss-divider{
        margin:20px 0;
        display: table;
        white-space: nowrap;
        height: auto;
        line-height: 1;
        text-align: center;
    }
    .discuss-divider:before{
        background-image: url('/images/icon/line.png');
        background-position: right 1em top 50%;
        content: "";
        display: table-cell;
        position: relative;
        top: 50%;
        width: 50%;
        background-repeat: no-repeat;

    }

    .discuss-divider:after{
        background-image: url('/images/icon/line.png');
        background-position: right 1em top 50%;
        content: "";
        display: table-cell;
        position: relative;
        top: 50%;
        width: 50%;
        background-repeat: no-repeat;

    }

    .dvider-sp{
        padding-left:6px;
        color:#636b6f;
        font-size:14px;
    }

    .discuss-feed{
        padding-left: 66px;
        margin-bottom: 15px;
        position: relative;
    }
    .feed-avatar{
        margin-left: -65px;
        display: block;
        width: 2.5em;
        height: auto;
        float: left;
        margin-top: 2px;

    }
    .feed-avatar img{
        width: 50px;
        height: 50px;
        border: 1px solid #fff;
        -webkit-box-shadow: 0 1px 10px 0 #a3b4bf;
        box-shadow: 0 1px 10px 0 #a3b4bf;
        border-radius: .28571429rem;

    }

    .feed-item{
        display:block;
      /*  padding: 10px 20px;*/
        color:#636b6f;
        background-color: #fff;
        border-radius: .28571429rem;
        height:auto;
        
    }

    .feed-item:before{
        position: absolute;
        top: 11px;
        right: 100%;
        left: 49px;
        display: block;
        width: 0;
        height: 0;
        pointer-events: none;
        content: " ";
        border-color: transparent;
        border-style: solid solid outset;
        border-width: 8px;
        border-right-color: #a4acb0;
    }
    .feed-item-header{
        width:auto;
        height:45px;
        padding:5px;
        border-bottom: 1px solid #bbccd5;
    }
    .item-header-meta{
        padding:10px 20px;
        color:#636b6f;
    }
    .item-header-meta>a{
        font-weight:bold;
        font-size:14px;
    }
    .metadata{
        display: inline-block;
        font-size: 12px;
        padding-left:10px;
    }
    .metadata:hover .metadata-sp{
        color:#409EFF;
        text-decoration:underline;
    }
    .metadata-desc{
        display:inline-block;
    }
    .item-header-reaction{
        position:absolute;
        top: 11px;
        right: 15px;
    }
    .item-header-reaction:hover .fa-reply{
         color:#409EFF;
     }

    .feed-item-body{
        padding:10px 20px;
    }

    .feed-item-mute{
        padding:5px 20px;
        font-size:12px;
    }
    .feed-item-mute-a{
        margin-left:5px;
    }
    .feed-item-mute-a:hover{
        color:#409EFF;
    }
     .feed-item-mute-a:hover .fa-commenting-o{
        color:#409EFF;
    }
    
    .feed-item-comment{
        padding:5px 20px;
    }

    .discuss-replay{
        margin-top:20px;
        margin-bottom:10px;
        border-top: 1px dashed #e9e5e5;
        padding:5px 0;
    }
    .discuss-replay-img{
        width:25px;
        height:25px;
    }

    .discuss-replay-content{
        font-size: 14px;
        padding: 5px 0;
        margin-left: 30px;
    }

    .discuss-replay-icon{
        color: #c4c2c2;
        font-size: 13px;
        padding-top: 0px;
        margin-left: 30px;
    }
    .dis-tip{
        font-size:14px;
        padding-right:10px;

    }


    .feed-item-footer{
        margin-top:5px;
        border-top:1px solid #DCDFE6;
    }

    .item-footer-col{
        font-size:0px;
    }
    
    .col-item{
        font-size:14px;
        width:75px;
        height:40px;
        text-align: center;
        color:#bbccd5;
        display:inline-block;
        border-right: 1px solid #DCDFE6;
        line-height: 40px;
    }
    .col-item:hover{
        background-color:#d1d1d1;
    }


    .column-replay{
        padding-left:66px;
        
    }
    .reply-editor{
        padding:10px 20px;
        background-color: #fff;
        border-radius: .285rem;
    }
    .w-e-toolbar{
        border-top-right-radius: .28571429rem;
        border-top-left-radius: .28571429rem;
    }
    .w-e-text-container{
        border-bottom-right-radius: .28571429rem;
        border-bottom-left-radius: .28571429rem;
    }

    .replay-button{
        padding:10px;
        height: 45px;
    }
    .replay-button-but{
        float:right;
    }
    
/************ column-discuss end******************************/


    
</style>